<template>
  <div class="mui-content mh-container pb pd">
    <mh-header headName="发布产品"> </mh-header>
    <div class="mh-form">
      <ul class="mui-table-view">
        <li class="mh-form-item" @tap="selectSize">
          <label>系统费用分配方式</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择分配方式" readonly v-model='cost_type'>
          </div>
        </li>
        <li class="mh-form-item" @tap="selectType">
          <label>产品类别</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择产品类别" readonly v-model='type'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>产品名称</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请输入产品名称" v-model='name'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>产品价格</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请输入产品价格" v-model='price'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>产品规格</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请输入产品规格" v-model='specifications'>
          </div>
        </li>
      </ul>
    </div>
    <div class="upload bg-w mh-pd">
      <p>产品图片</p>
      <input type="hidden" v-model='image'>
      <div class="upload-box">
        <span class="upload-ico">+</span>
      </div>
    </div>
    <div class="upload bg-w mh-pd">
      <p>产品介绍</p>
      <textarea cols="30" rows="18" placeholder="请输入产品介绍" v-model='introduce'></textarea>
    </div>

    <div class="fix-btn">
      <button type="button" class="mh-btn mui-btn-block" @tap='submit'>发布</button>
    </div>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "re-product",
    components: {
      MhHeader
    },
    data () {
      return {
        sizeList: [
          {text: '1/1000', value: '1'},
          {text: '2/1000', value: '2'}
        ],
        typeList: [
          {text: '鲜花', value: '1'},
          {text: '珠宝', value: '2'},
          {text: '旅游', value: '3'},
          {text: '礼物', value: '4'}
        ],
        cost_type: '',
        type: '',
        name: '',
        price: '',
        specifications: '',
        image: '',
        introduce: ''
      }
    },
    methods: {
      submit(){
        if(this.cost_type=='' || this.type=='' || this.name==''){
          mui.toast('请填写信息');
          return false
        }
        let self = this;
        MH_API.releaseGoods({
          cost_type: self.cost_type,
          type: self.type,
          name: self.name,
          price: self.price,
          specifications: self.specifications,
          image: self.image,
          introduce: self.introduce
        }).then(res => {
          if (res.status === 200) {
            mui.toast('发布成功');
            setTimeout(function(){
              self.$router.go(-1)
            }, 1500)
          }
          else{
            mui.toast(res.msg);
          }
        })
      },
      selectSize () {
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.sizeList);
        picker.show(function (selectItems) {
          console.log(selectItems[0].text);
          // console.log(selectItems[0].value);
          self.cost_type = selectItems[0].text;
        })
      },
      selectType () {
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.typeList);
        picker.show(function (selectItems) {
          self.type = selectItems[0].text;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .mh-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    line-height: 5rem;
    padding: 1px 2rem;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 1.4rem;
    overflow: hidden;
    &.item-lg {
      height: 6.5rem;
      line-height: 6.5rem;
    }
  }
  .mh-input-row {
    flex: 1;
    height: 100%;
    &>input {
      height: 5rem;
      margin: 0;
      border: 0;
      text-align: right ;
    }
  }
  .upload {
    padding: 1rem 2rem;
    &>p {
      margin-bottom: 1rem;
      @include sc(1.4rem, #666);
    }
    textarea {height: 6rem;padding: 0;}
  }
  .upload-box {
    position: relative;
    width: 100%;
    height: 11rem;
    background: #eee;
  }
  .upload-ico {
    @include center;
    @include sc(4rem, #dedede);
  }
  .fix-btn {
    position: fixed;
    width: 100%;
    height: 5rem;
    left: 0;
    right: 0;
    bottom: 0;
    button {
      width: 100%;
      height: 100%;
      border-radius: 0;
    }
  }
</style>
